<template>
  <view class="component">
    <view class="component-box">
      <view class="component-title" :style="{ borderBottom:showTitleBorder?'1px solid #E9E9E9':''}">
        <view class="component-title-left"></view>
        <view class="component-title-center">{{ title }}</view>
        <view class="component-title-right" v-if="showClose" @click="emits('iconClose')">
          <image src="/@/static/images/guanbi.png"></image>
        </view>
		<view class="component-title-right" v-else></view>
      </view>
      <view class="component-main">
        <slot></slot>
      </view>
      <view class="component-footer" v-if="showFooter">
        <view class="component-footer-cancel" @click="onClose">{{ cancelText }}</view>
        <view class="component-footer-confirm" @click="onConfirm">{{ confirmText }}</view>
      </view>

    </view>
    <view class="component-mask" @click="onClose"></view>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";

defineProps({
  title: {
    type: String,
    default: "标题"
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: "取消"
  },
  confirmText: {
    type: String,
    default: "确定"
  },
  visible: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: false
  },
  showTitleBorder: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['close', 'iconClose', 'confirm'])

onLoad(() => {
})

const onClose = () => {
  emits('close')
}

const onConfirm = () => {
  emits('confirm')
}
</script>

<style lang="scss" scoped>
@import "modal";
</style>
